/*! 
   这里是订单管理
*/
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardBody from "components/Card/CardBody.jsx";
import MaterialTable from "material-table";
import axios from 'axios';

const styles = {
  cardCategoryWhite: {
    "&,& a,& a:hover,& a:focus": {
      color: "rgba(255,255,255,.62)",
      margin: "0",
      fontSize: "14px",
      marginTop: "0",
      marginBottom: "0"
    },
    "& a,& a:hover,& a:focus": {
      color: "#FFFFFF"
    }
  },
  cardTitleWhite: {
    color: "#FFFFFF",
    marginTop: "0px",
    minHeight: "auto",
    fontWeight: "300",
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    marginBottom: "3px",
    textDecoration: "none",
    "& small": {
      color: "#777",
      fontSize: "65%",
      fontWeight: "400",
      lineHeight: "1"
    }
  }
};
/*
 *  
 *   下面的订单列表的数据项，格式如下
 * {
    "id": 49,   //编号
    "special": 0,   //是否有会员优惠
    "paidAmount": 80,
    "startDate": "2019-8-2",   //开始时间
    "endDate": "2019-8-3",     //结束时间
    "dateTime": "2019-8-1",    //订单生成时间
    "phone": "蓝",               //入住人手机号
    "arrivedTime": "17:00至19:00",   //到达时间
    "people": "蓝",             //入住人信息
    "status": 9,                //订单状态：
    "roomList": [               //预订房间列表
      {
        "id": 12,
        "location": "112",
        "canRent": true,
        "rent": true
      }
    ],
    "hotel": {                //所属宾馆
      "id": 1,
      "locaAddr": "广东省广州市天河区五山路483号",
      "locaName": "竹园宾馆",
      "description": "hotel",
      "locaLati": 23.15499,
      "locaLongi": 113.35655,
      "hotelPhone": "88888888"
    }
  }
 *    
 * 
*/
var orderdata = []
new Promise(resolve => {
  setTimeout(() => {
    resolve();
    let url = "/order/list"
    axios.post(url)
      .then(function (response) {
        let data = response.data
        orderdata = data;
        orderdata.newParam = 'roomnumber';
        for (let i = 0;i < data.length;i++) {
          orderdata[i].roomnumber = data[i].roomList.length;
        }
        console.log("orderList:", orderdata);
      })
      .catch(function (error) {
        console.log("error", error);
      });

  }, 600);
});

function TableList(props) {
  const { classes } = props;
  const [state, setState] = React.useState({
    columns: [
      { title: '编号', field: 'id', editable: 'never' },
      {
        title: '订单状态',
        field: 'status',
        lookup: { 0: '待审核', 1: '未入住', 2: '已入住', 9: '已取消' },
      },
      { title: '付款(元)', field: 'paidAmount', editable: 'never' },
      { title: '开始时间', field: 'startDate', editable: 'never' },
      { title: '结束时间', field: 'endDate', editable: 'never' },
      { title: '预订房间数', field: 'roomnumber', editable: 'never' },
      { title: '入住人', field: 'people', editable: 'never' }
    ],
    data: orderdata,
  });
  return (
    <GridContainer>
      <GridItem xs={12} sm={12} md={12}>
        <Card>
          <CardHeader color="info">
            <h4 className={classes.cardTitleWhite}>订单列表</h4>
            <p className={classes.cardCategoryWhite}>
              这里可以审核订单
            </p>
          </CardHeader>
          <CardBody>
            <MaterialTable
              detailPanel={[
                {
                  tooltip: 'Show Name',
                  render: rowData => {
                    return (
                      <div
                        style={{
                          fontSize: 23,
                          textAlign: 'center',
                          color: 'white',
                          backgroundColor: '#4caf50',
                        }}
                      >
                        <div>
                          酒店名： {rowData.hotel.locaName}
                        </div>
                        <div>
                          预订房间：{rowData.roomList[0].location}
                        </div>

                      </div>
                    )
                  },
                },

              ]}
              title=" "
              columns={state.columns}
              data={state.data}
              setState="true"
              editable={{
                onRowAdd: newData =>
                  new Promise(resolve => {
                    setTimeout(() => {
                      resolve();
                      const data = [...state.data];
                      console.log("hahah", data);
                      // console.log("newdata",data)
                      // data.push(newData);
                      setState({ ...state, data });
                    }, 600);
                  }),
                onRowUpdate: (newData, oldData) =>
                  new Promise(resolve => {
                    setTimeout(() => {
                      resolve();
                      // console.log("hahah", data);
                      // console.log(newData)
                      const data = [...state.data];
                      data[data.indexOf(oldData)] = newData;
                      // console.log("data", newData)

                      let url = "/order/updateStatus/" + newData.id + "/" + newData.status
                      axios.get(url, {})
                        .then(function (response) {
                          let data = response.data
                          // alert(data);
                          // console.log("data:",data);
                          console.log("res:", response);
                        })
                        .catch(function (error) {
                          console.log("error", error);
                        });
                      setState({ ...state, data });
                    }, 600);
                  }),
                // onClick:
              }}
            />
          </CardBody>
        </Card>
      </GridItem>
    </GridContainer>
  );
}

TableList.propTypes = {
  classes: PropTypes.object
};

export default withStyles(styles)(TableList);
